<template>
  <div>
    <Swiper v-if="false">swiper</Swiper>
    <div class="fonttop">
       <div class="swiper-container myswiper" ref="myswiperss">
      <div class="swiper-wrapper" >
        <div
          class="swiper-slide"
          v-for="banner in bannerList"
          :key="banner.bannerId"
        >
          <img :src="banner.imgUrl" />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>

    <tabbar :style="tbstyle" :tabs="tabs"></tabbar>
    <router-view></router-view>
    </div>
   
  </div>
</template>

<script>
import tabbar from "../components/Tabbar2.vue";
import Swiper from "swiper";
import "swiper/dist/css/swiper.css";
import "swiper/dist/js/swiper.js";
// import axios from "axios"
export default {
  data() {
    return {
      tbstyle: {
        positon: "relative",
        top: "0px",
        left: "0px",
      },
      tabs: [
        {
          name: "正在热映",
          to: "/films/NowPlaying",
        },
        {
          name: "即将上映",
          to: "/films/ComingSoon",
        },
      ],
      bannerList: [],
    };
  },
  name: "Films",
  components: {
    tabbar,
    Swiper,
  },
  mounted() {
    // 打印vuex所维护的swiperHeight的值
    // console.log("swiperHeight==",this.$store.state.swiperHeight);
    this.$axios({
      url: "/gateway?type=2&cityId=440100&k=4606926",
      headers: {
        "X-Client-Info":
          '{"a":"3000","ch":"1002","v":"5.0.4","e":"16337815972401750006890497","bc":"440100"}',
        "X-Host": "mall.cfg.common-banner ",
      },
    })
      .then((res) => {
        console.log('films data',res.data);
        this.bannerList = res.data.data;



        this.$nextTick(() => {
          console.log("swiperHeight==",this.$refs.myswiperss.$el);
          // this.$store.commit("swiperHeightMutation",this.$refs.myswiperss.$el.offsetHeight)
          new Swiper(".swiper-container", {
            direction: "horizontal", // 垂直切换选项
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination",
            },
          });
        });
      })
      .catch((err) => {
        console.log("err=", err);
      });
  },
};
</script>

<style lang="scss" scoped>

.swiper-slide{
  width: 100%;
  height: 100%;
  img {
  width: 100%;
}
}
 
</style>
  
  
